<template>
	<view class="home">
		<view class="page-section swiper-wrap">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true">
				<swiper-item>
					<view class="swiper-item"><image src="/static/home/1.png" mode="aspectFit"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="/static/home/2.jpg" mode="aspectFit"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="/static/home/3.jpg" mode="aspectFit"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <block v-if="notice"><van-notice-bar :left-icon="noticeImgs" :text="notice" /></block> -->

		<view class="home-goods">
			<view class="home-goods-title">购买合约</view>
			<view>
				<block v-for="(item, index) in imgList" :key="index">
					<view class="swiperitem">
						<view class="goods-item">
							<view class="goods-item-wrap">
								<view class="goods-item-top">
									<view class="img"><image src="/static/home/ind-sm.png" mode="aspectFit"></image></view>
									<view class="title">{{ item.name }}</view>
								</view>
								<view class="goods-item-list">
									<view class="goods-item-cell van-hairline--bottom">
										<view class="name">收益率</view>
										<view>{{ item.totalB }}%</view>
									</view>
									<view class="goods-item-cell van-hairline--bottom">
										<view class="name">合约期限</view>
										<!-- 一级合约为30天 -->
										<view>{{item.lv==1?'30天':'200天'}}</view>
									</view>
									<view class="goods-item-cell van-hairline--bottom">
										<view class="name">每日收益</view>
										<view>{{ item.dayPrice }} BHT</view>
									</view>
								</view>
							</view>
							<view class="goods-item-btn-wrap">
								<button class="base-btn bg2" hover-class="btn-hover" @tap="onBuy(item)">{{ item.price }} BHT购买</button>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<van-dialog use-slot :show="dialogShow">
			<view class="dialog-header">{{ dialogTitle }}</view>
			<view class="dialog-message"><rich-text :nodes="notice"></rich-text></view>
		</van-dialog>
	</view>
</template>

<script>
import { update } from '../../common/utils/update.js';
export default {
	data() {
		return {
			imgList: [],
			dialogTitle: '提示',
			notice: '',
			dialogShow: false,
			loading: false
		};
	},
	onLoad() {
		//#ifdef APP-PLUS
		plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
			update(wgtinfo.version);
		});
		//#endif
	},
	onShow() {
		this.getArt()
		this.getHomeInfo();
	},
	methods: {
		getArt() {
			try {
				const value = uni.getStorageSync('bht_note');
				if (!value) {
					this.$http.getArt().then(res => {
							const data = res.data;
							if (data.success) {
								if (data.data.length < 1) return
								this.dialogTitle = data.data[0].title
								this.notice = data.data[0].note;
								this.dialogShow = true
								uni.setStorageSync('bht_note', 'yes');
								return;
							}
							uni.showToast({
								title: data.errMsg,
								icon: 'none'
							});
						});
						return
				}
				this.dialogShow = false
			} catch (e) {
			}
		},
		getHomeInfo() {
			this.$http.getHomeInfo().then(res => {
				const data = res.data;
				if (data.success) {
					if (data.data.list.length) {
						data.data.list.forEach(e => {
							e.totalB = parseFloat((e.totalPrice - e.price ) / e.price * 100).toFixed(0)
						})
					}
					this.imgList = data.data.list
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			});
		},
		onBuy(item) {
			uni.showModal({
				title: '提示',
				content: `确定购买(${item.name})?`,
				success: res => {
					if (res.confirm) {
						if (this.loading) return;
						this.loading = true;
						uni.showLoading({
							title: '购买中...'
						});
						this.$http.buyMine({ id: item.id }).then(res => {
							this.loading = false;
							const data = res.data;
							if (data.success) {
								uni.showToast({
									title: '购买成功',
									icon: 'none'
								});
								uni.hideLoading();
								return;
							}
							uni.showToast({
								title: data.errMsg,
								icon: 'none'
							});
						});
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.swiper {
	height: 380upx;
}
.home {
	padding-bottom: 50upx;
	.swiper-wrap {
		padding: 30upx;
		background-color: #fff;
	}
	.swiper-item {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}
	&-goods {
		&-title {
			padding: 60upx 30upx;
			font-size: 40upx;
			font-weight: 600;
			line-height: 1;
		}
	}
}
.goods-item {
	&-wrap {
		display: flex;
		align-items: center;
	}
	padding: 30upx;
	text-align: center;
	background-color: #fff;
	border-radius: 20upx;
	box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.1);
	&-top {
		margin-right: 20upx;
		.img {
			width: 160upx;
			height: 160upx;
			margin: 10upx auto 20upx auto;
			overflow: hidden;
		}
		.title {
			font-size: 32upx;
			font-weight: 600;
		}
	}
	&-list {
		flex: 1;
	}
	&-cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx 20upx;
	}
	&-btn-wrap {
		margin-top: 40upx;
		margin-bottom: 20upx;
		padding: 0 70upx;
	}
}

// 3D轮播样式
.imageContainer {
	width: 100%;
	border-radius: 20upx;
	flex: 1;
	min-height: 900upx;
}
.swiperitem {
	padding: 0upx 60upx;
	margin-bottom: 30upx;
	box-sizing: border-box;
	position: relative;
	border-radius: 20upx;
}
.dialog {
	&-header {
		font-size: 32upx;
		font-weight: 500;
		padding-top: 25upx;
		text-align: center;
	}
	&-message {
		padding: 25upx;
		line-height: 1.5;
		text-align: center;
		max-height: 60vh;
		overflow-y: auto;
		white-space: pre-wrap;
	}
}
</style>
